<template>
  <!-- 医生统计 -->
  <div>
    <!-- 页面标题 -->
    <div id="doctor-stat-title">
      <h1 style="margin-left:50px">医生统计</h1>
    </div>
    <!-- 医生数据 -->
    <div id="doctor-stat-listdiv">
      <div class="doctor-stat-select-top">
        <div id="doctor-stat-titleicon">
          <i class="el-icon-tickets"
             style="margin-left:50px"></i>&nbsp;&nbsp;医生数据
        </div>
        <div id="doctor-data-exportdiv">
          <el-button type="primary"
                     round>导出数据</el-button>
          <el-select v-model="doctorvalue"
                     placeholder="请选择"
                     style="width:200px;margin-left:10px">
            <el-option v-for="item in doctoroptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>

          <el-date-picker v-model="doctorselectmonth"
                          type="month"
                          placeholder="选择月"
                          v-if='this.doctorvalue==="month"'>
          </el-date-picker>
          <el-date-picker v-model="doctorselectyear"
                          type="year"
                          placeholder="选择年"
                          v-if="this.doctorvalue==='year'">
          </el-date-picker>
          <el-select v-model="doctorselecttitle"
                     placeholder="请选择职称"
                     v-if="this.doctorvalue==='title'">
            <el-option v-for="item in doctortitleoptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>

      </div>
      <!-- 条目展示 -->
      <div id="doctor-stat-datalistdiv">
      </div>
    </div>
    <!-- 服务数据 -->
    <div id="doctor-stat-listdiv">
      <div class="doctor-stat-select-top">
        <div id="doctor-stat-titleicon">
          <i class="el-icon-tickets"
             style="margin-left:50px"></i>&nbsp;&nbsp;服务数据
        </div>
        <div id="doctor-data-exportdiv">
          <el-button type="primary"
                     round>导出数据</el-button>

          <el-date-picker v-model="serviceselectmonth"
                          type="month"
                          placeholder="选择月">
          </el-date-picker>

        </div>

      </div>
      <!-- 条目展示 -->
      <div id="doctor-stat-datalistdiv">
      </div>
    </div>
  </div>
</template>
<script>
let date = new Date();
export default {
  data () {
    return {
      //医生数据
      doctorvalue: 'month',
      doctorselectmonth: date,
      doctorselectyear: date,
      doctorselecttitle: '主任',
      doctoroptions: [{
        value: 'year',
        label: '按年统计'
      }, {
        value: 'month',
        label: '按月统计'
      }, {
        value: 'title',
        label: '按职称统计'
      },],
      doctortitleoptions: [{
        value: '主任',
        label: '主任'
      }
      ],

      //服务数据
      serviceselectmonth: date
    }
  },
  methods: {
  },
  created () {
  }
}
</script>
<style scoped>
* {
  border: 1px solid red;
  border-radius: 3px;
}
/* 页面标题 */
#doctor-stat-title {
  margin-left: 50px;
  margin-right: 50px;
  height: 60px;
}
/* 用户列表 */
#doctor-stat-titleicon {
  height: 100%;
  width: 200px;
  float: left;
}
#doctor-data-exportdiv {
  height: 100%;
  float: left;
  margin-left: 30px;
  line-height: 50px;
}
.block {
  height: 100%;
  width: 200px;
  margin-left: 10px;
}
#doctor-stat-listdiv {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.el-icon-tickets {
  font-size: 30px;
  margin-top: 10px;
}
#doctor-stat-datalistdiv {
  overflow: hidden;
}
.doctor-stat-select-top {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  font-size: 20px;
}
</style>